<template>
  <div id="no-confilct-dialog">
    <div class="title item">
      <span>{{titleLabel}}：</span>
      <p>{{lawContrastResult.muster_name}}</p>
    </div>
    <div class="relevance-image">
      <img src="../../../../../static/regulations-contrast/relevance.png" alt="" class="relevance-img">
    </div>
    <div class="comparison-result-list">
      <div class="item" v-for="(v,i) in lawContrastResult.law_names" :key="i">
        <div class="txt">
          <span class="comparison-name">法规：</span>
          <p>{{v}}</p>
        </div>
      </div>
    </div>
    <div class="image">
      <img src="../../../../../static/regulations-contrast/no-confilct-dialog-.png" alt="" class="no-confilct-img">
      <p>不存在冲突</p>
    </div>
    <div class="explain">*本结果仅供参考，不代表正式监管意见！</div>
  </div>
</template>

<script>
export default {
  props: {
    lawContrastResult: {
      type: Object,
      default: () => {}
    },
    titleLabel: {
      type: String,
      default: '法规'
    }
  }
}
</script>

<style lang="scss" scoped>

#no-confilct-dialog{
  font-size: $fs-m;
  .image{
    text-align: center;
    p{
      color: #01BF7E;
      font-size: 20px;
      margin: 16px 0 0 0;
      line-height: 28px;
    }
  }
  .explain {
    margin-top: 24px;
    margin-left: 50px;
    color: $tertiary-text-color;
    text-align: left;
  }
  .title{
    width:621px;
    color: $default-text-color;
    margin: 15px auto;
    padding: 13px 16px;
    background:$primary-bg-color;
    border-radius:6px;
    border:1px solid $box-border-color;
    box-sizing: border-box;
    overflow: hidden;
    span{
      width: 48px;
      float: left;
      font-weight: 600;
    }
    p{
      width: calc(100% - 48px);
      float: left;
      margin: 0;
    }
  }
  .relevance-image{
    margin: 0 auto;
    text-align: center;
    .relevance-img{
      width: 38px;
      height: 24px;
    }
  }
  .comparison-result-list{
    height: auto;
    max-height: 300px;
    width:621px;
    margin: 15px auto;
    padding: 13px 16px;
    overflow-y: auto;
    background:$primary-bg-color;
    box-sizing: border-box;
    border-radius:6px;
    border:1px solid $box-border-color;
  }
  .item{
    text-align: left;
    margin-bottom: 13px;
    .txt{
      color: $sedondary-text-color;
      line-height: 20px;
      p{
        width: calc(100% - 48px);
        margin: 0;
        float: left;
        text-align: left;
      }
      .comparison-name{
        width: 48px !important;
        color: $default-text-color;
        float: left;
        font-weight: 600;
      }
    }
  }
  .item:last-of-type{
    margin-bottom: 0;
  }
  .no-confilct-img{
    width: 56px;
    height: 56px;
  }
}
</style>

<style lang="scss">
#no-confilct-dialog{
  .el-scrollbar {
    height: 300px;
  }
}
</style>
